<template>
	<a-modal
		dialogClass="modal-post-box"
		:title="$i18n('selectPeople.post.showDetail.label')"
		:maskClosable="false"
		:destroyOnClose="true"
		:visible="showList"
		:okText="$i18n('common.button.ok.label')"
		:cancelText="$i18n('common.button.cancel.label')"
		@ok="onOk"
		@cancel="onCancel"
		:global="dialogWindow"
	>
		<div class="modal-content">
			<div class="model-top">
				<div class="top-left">
					<span class="left-label">{{ $i18n('org.post.label') }}：</span>
					<span class="left-item" :title="activePostData.name">{{ activePostData.name }}</span>
				</div>
				<div class="top-right">
					<a-input-search
						:placeholder="$i18n('selectPeople.input',$i18n('org.member.label'))"
						style="width: 160px"
						v-model.trim="searchValue"
						@search="onSearch"
					/>
				</div>
			</div>
			<div class="model-bottom">
				<DetailList
					ref="memberlList"
					:selectedMaps="selectedMaps"
					@checked="onChecked">
				</DetailList>
			</div>
		</div>
	</a-modal>
</template>
<script>
import DetailList from './detailList.vue';
import { ACTION_ADD_ENTITY, ACTION_REMOVE_ENTITY } from '@/store/actionTypes';
import { mapActions, mapState } from 'vuex';
import { EntityTypes } from '@/utils/orgConstants';
import { deleteBySelectedKey, getSelectKey } from '@/utils/utils';

export default {
	name: 'postMemberList',
	components: {
		DetailList
	},
	props: {
		showList: {
			type: Boolean,
			default: false
		},
		activePostData: {
			type: Object,
			default: () => {
			}
		}
	},
	inject: ['app'],
	data() {
		return {
			searchValue: '',
			selectedMaps: {},
			selectedUuidMaps: {},
			newDeletedMembers: [],
			newSelectedMembers: []

		};
	},
	computed: {
		...mapState('selectData', ['selectedList']),
		orgSelect() {
			return this.app().orgSelect;
		}
	},
	watch: {
		showList(val) {
			if (val) {
				window.showbarMask();
				this.onInitData();
			} else {
				window.hidebarMask();
			}
		}
	},
	methods: {
		...mapActions('selectData', [ACTION_ADD_ENTITY, ACTION_REMOVE_ENTITY]),
		onInitData() {
			this.searchValue = '';
			this.selectedMaps = {};
			this.selectedUuidMaps = {};
			this.newDeletedMembers = [];
			this.newSelectedMembers = [];

			for (const member of this.selectedList) {
				if (EntityTypes.Member !== member.type) {
					continue;
				}
				let selectedKey = getSelectKey(member);
				this.$set(this.selectedMaps, selectedKey, member);
				this.$set(this.selectedUuidMaps, member.type + '|' + member.id, selectedKey);
			}
			this.onSearchData({});
		},
		onSearchData(data) {
			let { accessFileSecretLevel } = this.orgSelect;
			let params = {
				postId: this.activePostData.id,
				accessFileSecretLevel,
				...data
			};
			this.$nextTick(() => {
				this.$refs.memberlList.search(params);
			});
		},
		onCancel() {
			this.$emit('hidden');
		},
		onOk() {
			this[ACTION_REMOVE_ENTITY]({
				entities: this.newDeletedMembers
			});
			this[ACTION_ADD_ENTITY]({
				entities: this.newSelectedMembers
			});
			this.$emit('hidden');
		},
		onSearch() {
			this.onSearchData({ keyword: this.searchValue });
		},
		onChecked(params) {
			let { newSelectedMembers, newDeletedMembers, selectedUuidMaps, selectedMaps } = this;
			const { checked, entity,isSingle } = params;
			const keys = Object.keys(selectedUuidMaps);
			if (isSingle && keys.length > 0) {
				const typeId = keys[0];
				const selectedKey = selectedUuidMaps[typeId];
				const entity1 = selectedMaps[selectedKey];
				//单选去掉以前的选择
				deleteBySelectedKey(newSelectedMembers, selectedKey);
				this.$set(newDeletedMembers, newDeletedMembers.length, entity1);
				this.$delete(selectedUuidMaps, typeId);
				this.$delete(selectedMaps, selectedKey);
			}
			{
				const typeId = entity.type + '|' + entity.id;
				let selectedKey = getSelectKey(entity);
				if (checked) {
					// 选中
					let oldSelectedKey = selectedUuidMaps[typeId];
					if (oldSelectedKey) {
						let selectedEntity = selectedMaps[oldSelectedKey];
						this.$delete(selectedUuidMaps, typeId);
						this.$delete(selectedMaps, oldSelectedKey);
						deleteBySelectedKey(newSelectedMembers, oldSelectedKey);
						this.$set(newDeletedMembers, newDeletedMembers.length, selectedEntity);
					}
					this.$set(selectedMaps, selectedKey, entity);
					this.$set(selectedUuidMaps, typeId, selectedKey);
					deleteBySelectedKey(newDeletedMembers, selectedKey);
					this.$set(newSelectedMembers, newSelectedMembers.length, entity);
				} else {
					// 取消
					deleteBySelectedKey(newSelectedMembers, selectedKey);
					this.$set(newDeletedMembers, newDeletedMembers.length, entity);
					this.$delete(selectedUuidMaps, typeId);
					this.$delete(selectedMaps, selectedKey);
				}
			}
		}
	}
};
</script>
<style lang="scss">
.modal-post-box > .ant-modal-content > .ant-modal-body{
	padding: 10px 24px;
}
.modal-post-box > .ant-modal-content .modal-content {
	.model-top {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10px;

		.top-left {
			display: flex;
			height: 32px;

			.left-label {
				font-size: 14px;
				color: $postDefalutFontColor;
				height:32px;
				line-height:32px;
				width: 45px;
			}

			.left-item {
				font-size: 14px;
				color: $postDefalutFontColor;
				margin-left: 10px;
				height:32px;
				line-height:32px;
				width: 220px;
				@include ellipsis();
			}
		}
	}

	.model-bottom {
		width: 100%;
		height: 280px;
		border: 1px solid $borderColor;
		overflow: auto;
	}

}
</style>
